<template>
    <div class="merchantContainer">
        <div class="headBar">
            <div>
                <span>
                    <i @click.stop="$router.go('-1')" class="el-icon-arrow-left"></i>
                </span>
                <span style="display: flex;align-items: center;">
                    <transition appear v-if="search==true">
                        <el-input
                                placeholder="请输入需要查询的菜品"
                                v-model="input"
                                clearable>
                    </el-input>
                    </transition>
                    <i @click="search=!search" class="el-icon-search"></i>
                    <i class="el-icon-shopping-cart-2"></i>
                    <i ref="star" @click="focus" class="el-icon-star-off"></i>
                    <i class="el-icon-more"></i>
                </span>
            </div>
        </div>
        <div class="merchantInfo">
            <el-card style="width: 95%;margin-bottom: 10px;display: flex;">
<!--                class="InfoBox"-->
                <div>
                    <div class="InfoTitle">
                        <h3 style="align-self: flex-end;margin-left: 5px;">{{shop.shopName}}</h3>
                        <!--                    <img class="merchantAvatar" src="http://127.0.0.1:3000/static/img/avatar.jpg" alt="">-->
                    </div>
                    <div class="InfoSubTitle">
                    <span>
                        <i class="el-icon-alarm-clock"></i>
                        <p>配送约{{shop.deliveryTime}}分钟</p>
                    </span>
<!--                        |-->
<!--                        <span style="margin-left: 5px;">-->
<!--                        <i class="el-icon-trophy"></i>-->
<!--                        <p>花都区日韩料理人气第3名</p>-->
<!--                    </span>-->
                    </div>
                    <el-tag type="success" size="mini" class="notice">
                        <p>公告：</p>
                        <p>{{shop.shopNotice}}</p>
                    </el-tag>
                    <div class="sale">
                    <span v-for="(item,i) in shop.discountList" :key="i">
                        {{item.satisfy}}减{{item.reduce}}
                    </span>
                    </div>
                </div>
                <div>
                    <el-image v-if="shop.shopImg!=null" class="merchantAvatar" :src="$url1+shop.shopImg"></el-image>
                </div>
            </el-card>
        </div>
        <div class="menu">
            <div class="menuCon">
                <div class="menuNav">
                <span ref="btn1" class="btn" @click="change('diancai',$event)">点菜</span>
                <span ref="btn2" class="btn" @click="change('evaluation',$event)">评价</span>
                <span ref="btn3" class="btn" @click="change('merchantInfo',$event)">商家</span>
                </div>
            </div>
                <diancai :shop="shop" v-if="activeName=='diancai'"></diancai>
                <evaluation v-if="activeName=='evaluation'"></evaluation>
            <merchantInfo :shop="shop" v-if="activeName=='merchantInfo'"></merchantInfo>
            
        </div>
    </div>
</template>
<script>
    import diancai from '../subComs/diancai.vue'
    import evaluation from '../subComs/evaluation.vue'
    import merchantInfo from "../subComs/merchantInfo.vue";
export default{
    created(){
        this.getGoods()
        this.getClassify()
        this.getShop()
    },
    data(){
        return {
            activeName:'diancai',
            search:false,
            input:'',
            shop:'',
            shopId:this.$route.params.shopId,
            goods:[],
            classify:[]
        }
    },
    components:{
        diancai,evaluation,merchantInfo
    },
    methods:{
        getShop(){
            let params={
                shopId:this.shopId
            }
            this.$axios({
                method:'get',
                url:'/merchant/getShopById',
                params
            }).then(r=>{
                this.shop = r.data
            })
        },
        getGoods(){
            let params={
                shopId:this.shopId
            }
            this.$axios({
                method:'get',
                url:'/merchant/getGoodsByShopId',
                params
            }).then(r=>{
                this.goods = r.data.result
            })
        },
        getClassify(){
            let params={
                shopId:this.shopId
            }
            this.$axios({
                method:'get',
                url:'/merchant/getClassifyByShopId',
                params
            }).then(r=>{
                this.classify = r.data
            })
        },
        focus(){
            if(this.$refs.star.className=='el-icon-star-off'){
                this.$refs.star.className='el-icon-star-on'
            }else{
                this.$refs.star.className='el-icon-star-off'
            }
        },
        change(name,event){
            this.activeName = name
            this.$refs.btn1.className = 'btn'
            this.$refs.btn2.className = 'btn'
            this.$refs.btn3.className = 'btn'
            event.path[0].className = 'active'
        }
    },
    mounted() {
        this.$refs.btn1.className = 'active'
    },
    watch: {
        shopId(){
            this.getGoods()
            this.getClassify()
        }
    },
}
</script>
<style lang='less' scoped>
    /deep/ .merchantInfo .el-card__body{
        display: flex;
        width: 100%;
        justify-content: space-between;
    }
    .menu{
        background-color: white;
        width: 100%;   
        display: flex;
        /* justify-content: center; */
        align-items: center;
        flex-direction: column;
        height: 582px;
        border-radius: 10px;
        
    }
    /* v-enter 【进入之前，元素的起始状态】 */
    /* v-leave-to 【动画离开之后，离开的终止状态】 */
    .v-enter,
    .v-leave-to {
        opacity: 0;
        transform: translateX(150px);
    }
    /* v-enter-active 【入场动画的时间段】 */
    /* v-leave-active 【离场动画的时间段】 */
    .v-enter-active,
    .v-leave-active{
        transition: all 0.8s ease;
    }

    .menuCon{
        width: 95%;
        display: flex;
        flex-direction: column;
        /* padding-top: 36px; */
    }
    .btn{
        font-size: 18px;
    }
    .active{
        font-size: 20px;
        font-weight: 800;
        border-bottom: 2px solid yellow;
        transition: all .3s;
    }
    .menuNav{
        font-size: 20px;
        display: flex;
        justify-content: center;
        flex-direction: row;
        height: 50px;
        align-items: center;
    }
    .menuNav span{
        margin-right: 30px;
    }
    .keyword{
        width: 80px;
        height: 25px;
    }
    .merchant{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .merchantContainer{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        background-color: whitesmoke;
        overflow-y: scroll;
    }
    .headBar{
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .headBar>div{
        padding-top: 10px;
        padding-bottom: 10px;
        width: 95%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .headBar i{
        font-size: 25px;
        padding: 0 5px;
    }
    .merchantInfo{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 120px;
    }
    .InfoBox{
        background-color: white;
        width: 95%;
        height:100px;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-shadow: 2px 2px 5px #e5e5e9;
    }
    .InfoTitle{
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .InfoSubTitle{
        margin: 3px 0;
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .InfoSubTitle span{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-right: 5px;
        font-size: 10px;
    }
    .InfoSubTitle i{
        padding-right: 3px;
        color: #EEA071;
    }
    .merchantAvatar{
        width: 60px;
        margin-right: 10px;

        border-radius: 50%;
    }
    .notice{
        width: 100%;
        display: flex;
        flex-direction: row;
        font-size: 10px;
        color: #BCBCBC;
    }
    .sale{
        width: 100%;
        margin-left: 10px;
        display: flex;
        flex-direction: row;
        font-size: 10px;
        margin: 5px 0;
    }
    .sale span{
        padding: 0 5px;
        color: #E26462;
        border: 1px solid #F8F0EC;
        margin: 0 3px;
    }
    
</style>